<template>
  <div class="system-info">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统日志</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <el-divider>
          <template v-if="btnAdd">
            <router-link class="log-edit-btn" to="/home/syslog/addLog"><i class="el-icon-edit"></i> 发布</router-link>
          </template>
          <template v-if="!btnAdd">
            版本信息
          </template>
        </el-divider>
        <ul class="layui-timeline">
          <li class="layui-timeline-item" v-for="(item, index) in devList" :key="index">
            <i class="layui-icon layui-timeline-axis">
              <i class="fa fa-sun-o" v-if="index === 0" aria-hidden="true"></i>
              <i class="fa fa-circle-thin" v-else aria-hidden="true"></i>
            </i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">{{item.editionNo}}  <span>{{item.releaseTime | filterTime }}  <i class="el-icon-delete" @click="delLog(item.id)" v-if="btnDel">删除</i></span></h3>
              <div v-html="item.note"></div>
            </div>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入时间格式化插件
import moment from 'moment';
export default {
  name: 'syslog',
  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },

  // 无白屏刷新方法注入
  inject: ['reload'],

  data () {
    return {
      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 版本信息列表
      devList: []
    };
  },

  // 监听
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    }
  },

  // 过滤器
  filters: {
    // 时间显示过滤
    filterTime (value) {
      return moment(value).format('YYYY年MM月DD日 HH:mm:ss');
    }
  },

  // 实例创建后执行
  created () {
    // 按钮级授权
    this.authorization(this.$store.state.btns);

    // 获取版本信息
    this.getDevList();
  },

  methods: {
    // 按钮级授权
    authorization (data) {
      for (let i in data) {
        if (data['sel'] === 0) {
          this.btnSel = false;
        }
        if (data['add'] === 0) {
          this.btnAdd = false;
        }
        if (data['del'] === 0) {
          this.btnDel = false;
        }
        if (data['upload'] === 0) {
          this.btnUpload = false;
        }
        if (data['down'] === 0) {
          this.btnDown = false;
        }
        if (data['edit'] === 0) {
          this.btnEdit = false;
        }
        return i;
      }
    },

    // 获取版本
    getDevList () {
      let _this = this;
      // 获取所有公司数据
      _this.$http.get('api/findAllEdition').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.devList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 删除
    delLog (id) {
      let _this = this;
      // 删除二次确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 收集请求参数
        let params = {
          id: id
        };
        // 根据ID删除对应数据
        _this.$http.post('api/delEdition', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getDevList();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
